<template>
  <view>
    <view class="content-box" v-for="(item,index) in listData" :key="index">
      <view class="content-left">
        <image class="content-img" :src="item.img || baseIconUrl + '/userIcon/icon_mine_vip_bg.png'" mode="aspectFill"/>
      </view>
      <view class="content-center">
        <view class="card-top">
          <view class="title">VIP专属定制</view>
          <view class="date">有效期:{{ item.validMonths }}个月</view>
        </view>
        <view class="card-down">
          <text>开通时间:</text><text>{{ item.createDate }}</text>
        </view>
      </view>
      <view class="content-right">{{ item.cardPrice }}￥</view>
    </view>
  </view>
</template>

<script>
  import { baseIconUrl } from '@/config'
  export default {
    name: 'VipCustomList',
    data() {
      return {
        baseIconUrl,
        listData: []
      }
    },
    props: {
      vipCustomList: {
        type: Array,
        default: []
      }
    },
    watch: {
      vipCustomList: {
        handler(newVal, oldVal) {
          this.listData = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.listData = uni.$u.deepClone(this.vipCustomList)
    },
    methods: {
    }
  }
</script>
<style lang="scss">
.content-box{
  width: 690rpx;
  margin: 0 auto;
  border-radius: 16rpx;
  background: #fff;
  margin-top: 20rpx;
  padding: 0 15rpx 30rpx;
  display: flex;
  justify-content: space-around;
  .content-left{
    .content-img{
      width: 240rpx;
      height: 140rpx;
      border-radius: 16rpx;
  }
  }
  .content-center{
    color:#999;
    margin-left: 8rpx;
    .card-top{
      height: 107rpx;
      .title{
        font-size: 32rpx;
        color: #000;
        font-weight: 600;
      }
      .date{
        font-size: 28rpx;
        margin-top: 6rpx;
      }
    }
    .card-down{
      font-size: 24rpx;
    }
  }
  .content-right{
    font-size: 36rpx;
    font-weight: 600;
    color: #000;
  }
}
</style>
